import { message } from 'antd';
import React, { useState, useEffect } from 'react';
import ApprovePageIndex from '@/components/ApprovePage';
import BasicInfo from '@/components/ApprovePage/BasicInfo';
import Explain from '@/components/ApprovePage/Explain';
import FilePage from '@/components/ApprovePage/FilePage';
import Difference from '@/components/ApprovePage/Difference';
import { submitToOAUsingPOST_1 } from '@/services/ReturnMoneyValueMgr'; // 回款系数
import { isEmpty } from '@/utils/utils';
import { getApproveData } from './utils/request';

const Approve = props => {
  const { id, vId, pId, action, taskId } = props.location.query;
  const isEdit = action === 'modify';
  // 说明
  const [descriptionValue, setDescriptionValue] = useState('');
  // 提交时的 loading
  const [submitLoading, setSubmitLoading] = useState(false);
  const [loading, setLoading] = useState(true);
  const [state, setState] = useState({
    projectName: '',
    projectCode: '',
    projectArea: '',
    equityRatio: '',
  });
  const [tabs, setTabs] = useState([]);
  const [fileList, setFileList] = useState([]);

  // 获取数据
  const getData = async () => {
    const res = await getApproveData({ vId, pId, examineId: id });
    if (res && res.code === 1) {
      const { data, files, description, basicInfo } = res;
      console.log(data, files, description, basicInfo, '========res');
      setTabs(data || []);
      setFileList(
        files?.map(tar => ({
          uid: tar.fileId,
          name: tar.fileName,
          filePath: tar.filePath,
          previewUrl: tar.previewUrl,
          status: 'done',
        })) || [],
      ); // 附件数据
      setState(basicInfo || state);
      setDescriptionValue(description || '');
    }
    setLoading(false); // loading
  };

  // 提交审批
  const handleSubmitApprove = async () => {
    if (isEmpty(descriptionValue)) {
      message.warning('请填写审批说明后再提交');
      return;
    }
    // 准备执行提交
    setSubmitLoading(true);
    const data = {
      description: descriptionValue,
      examineId: id,
      files: fileList?.map(tar => tar.uid),
      projectId: pId,
      versionId: vId,
    };
    const res = await submitToOAUsingPOST_1({ data });
    if (res && res.code === 1) {
      setSubmitLoading(false);
      window.location.href = res.data;
    }
    setSubmitLoading(false);
  };

  useEffect(() => getData(), []);

  return (
    <ApprovePageIndex
      action={action}
      taskId={taskId}
      loading={loading}
      approvalState={state.approvalState}
      title={`【回款系数审批】${state.projectName}回款系数审批`}
      instanceId={state.instanceId}
      submit={{
        loading: submitLoading,
        onClick: handleSubmitApprove,
      }}
      url={`${window.location.origin}/#/OperatingPlan/PayBackModulus`}
      viewUrl={state.viewUrl}
    >
      {/* 基本信息 */}
      <BasicInfo data={state} />
      {/* 差异 */}
      <Difference data={tabs} />
      {/* 审批要点说明 */}
      <Explain
        isEdit={isEdit}
        handleExplain={({ target: { value } }) => setDescriptionValue(value)}
        value={descriptionValue}
      />
      {/* 附件 */}
      <FilePage fileList={fileList} handleFile={setFileList} isEdit={isEdit} />
    </ApprovePageIndex>
  );
};

export default Approve;
